<%@include file="/pages/include/tag_include.jsp"%>
<%@include file="/pages/include/base_context.jsp"%>
<script>
    jQuery(document).ready(function($){
        $('#action-submit').click(function(){
            $('#the-form').submit();
        });
            <s:if test="%{form.allowEdit}">
        $('#action-add-author').click(function(){
            var trEl = $('#author-table tr:last').clone();
            $(trEl).attr('data-id', parseInt($(trEl).attr('data-id')) + 1 );
            $('.author-hidden' ,trEl).attr('name','form.conferenceAuthor.authors['+$(trEl).attr('data-id')+'].type');
            $('.author-hidden' ,trEl).val('M');
            
            $('.author-hidden-id' ,trEl).attr('name','form.conferenceAuthor.authors['+$(trEl).attr('data-id')+'].id');
            $('.author-hidden-id' ,trEl).val('');
            
            $('.uploader-text' ,trEl).html('<span class="label"><s:text name="member"/></span>');
            
            
            $('.author-select' ,trEl).attr('name','form.conferenceAuthor.authors['+$(trEl).attr('data-id')+'].userAccountId');
            $('#author-table').append(trEl);
            
            $('.action-remove', trEl).click(function(){
                $(this).parent().parent().remove();   
            });
        });
        
        $('.action-remove').click(function(){
            $(this).parent().parent().remove();   
        });
        
        $('#action-add-file').click(function(){
            var trEl = $('#file-table tr:last').clone();
            $(trEl).attr('data-id', parseInt($(trEl).attr('data-id')) + 1 );
            
            $('.input-file' ,trEl).attr('name','form.fileUploads['+$(trEl).attr('data-id')+'].fileUpload');
            $('.input-keyword' ,trEl).attr('name','form.fileUploads['+$(trEl).attr('data-id')+'].keyWord');
            
            $('#file-table').append(trEl);
        });
        
        $('.action-file-remove').click(function(){
            $('#selected-index').val($(this).attr('data-id'));
            $('#the-form').attr('action','<s:url value="/conferencesubmit/remove_file.do" />')
            $('#the-form').submit();
        });
        </s:if>
    });
    
</script>

<div class="container">


    <%@include file="/pages/include/message_display_include.jsp"%>
    <form id="the-form" class="form-horizontal" method="POST" action='<s:url value="/conferencesubmit/save.do"/>' enctype="multipart/form-data">
        <input id="selected-index" type="hidden" value="" name="form.selectedIndex" />
        <input type="hidden" value="<s:property value="%{form.conferenceAuthor.id}"/>" name="form.conferenceAuthor.id" />
        <input type="hidden" value="<s:property value="%{form.conferenceAuthor.conferenceId}"/>" name="form.conferenceAuthor.conferenceId" />
        <div class="control-group">
            <label class="control-label" for="inputName"><s:text name="name" /></label>
            <div class="controls">
                <input readonly type="text" name="form.conferenceAuthor.conference.name" value='<s:property value="%{form.conferenceAuthor.conference.name}"/>' id="inputUsername" placeholder="Name">
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="inputName"><s:text name="authors" /></label>
            <div class="controls">
                <a id="action-add-author" href="javascript:void(0);" class="btn btn-info">Add</a>
                <table id="author-table" class="table table-striped">
                    <thead>
                        <th><s:text name="author" /></th>
                        <th><s:text name="role" /></th>
                        <th></th>
                    </thead>
                    <s:iterator value="form.conferenceAuthor.authors" var="item" status="row">
                        <tr data-id="<s:property value="#row.index" />">
                            <td>
                                <input class="author-hidden" type="hidden" value="<s:property value="#item.type"/>" name="form.conferenceAuthor.authors[<s:property value="#row.index" />].type"/>
                                <input class="author-hidden-id" type="hidden" value="<s:property value="#item.id"/>" name="form.conferenceAuthor.authors[<s:property value="#row.index" />].id"/>

                                <select class="author-select" name="form.conferenceAuthor.authors[<s:property value="#row.index" />].userAccountId">
                                    <s:iterator value="participants" var="participantItem">
                                        <option value="<s:property value="#participantItem.accountId" />"
                                                <s:if test="%{#item.userAccountId== #participantItem.accountId }">selected="selected"</s:if> >
                                            <s:property value="#participantItem.fullName" />
                                        </option>
                                    </s:iterator>
                                </select>
                            </td>
                            <td>
                                <div class="uploader-text">
                                <s:if test="%{#item.uploader}">
                                    <span class="label label-success"><s:text name="text_uploader"/></span>
                                </s:if>
                                    <s:if test="%{not #item.uploader}">
                                    <span class="label "><s:text name="member"/></span>
                                </s:if>
                                </div>    
                            </td>
                            <td>
                                <s:if test="%{form.allowEdit}">
                                    <a href="javascript:void(0);" class="btn btn-danger action-remove">Remove</a>
                                </s:if>
                            </td>
                        </tr>
                    </s:iterator>
                </table>
            </div>
        </div>   
        <div class="control-group">
            <label class="control-label" ><s:text name="submission_item" /></label>
            <div class="controls">
                <table class="table table-striped">
                    <thead>
                    <th><s:text name="uploaded_file" /></th>
                    <th><s:text name="key_word" /></th>
                    <th></th>
                    </thead>
                    <s:iterator value="form.conferenceAuthor.conferenceItems" var="item" status="row">
                        <tr data-id="0">
                            <td>
                                <s:property value="#item.fileName"/>
                            </td>
                            <td>
                                <s:property value="#item.keyWord"/>
                            </td>
                            <td>
                                <s:if test="%{form.allowEdit}">
                                    <a href="javascript:void(0);" class="btn btn-danger action-file-remove" data-id="<s:property value="#item.id"/>">Remove</a>
                                </s:if>
                            </td>
                        </tr>
                    </s:iterator>

                </table>
                <s:if test="%{form.allowEdit}">    
                    <hr/>    
                    <a id="action-add-file" href="javascript:void(0);" class="btn btn-info">Add</a>
                    <table id="file-table" class="table table-striped">
                        <thead>
                        <th><s:text name="file" /></th>
                        <th><s:text name="key_word" /></th>
                        </thead>
                        <tr data-id="0">
                            <td>
                                <s:file name="form.fileUploads[0].fileUpload" cssClass="input-file" label="Select a File to upload" size="40"  />
                            </td>
                            <td>
                                <input type="text" name="form.fileUploads[0].keyWord" value="" class="input-keyword"/>
                            </td>
                        </tr>
                    </table>
                </s:if>


            </div>
        </div>




        <center>
            <a href="<s:url value="/conferencesubmit/list.do"/>" class="btn btn-danger" ><s:text name="cancel"/></a>

            <s:if test="%{form.allowEdit}">
                <a id="action-submit" href="javascript:void(0);" class="btn btn-success " ><s:text name="submit"/></a>
            </s:if>
        </center>
    </form>

</div>
